<template>
  <sweet-calendar ref="calendar">
    <template #header="{date}">
      <span>Custom header content</span>
      <span>{{ date }}</span>
      <sweet-button-group>
        <sweet-button size="small" @click="selectDate('prev-year')"> Previous Year </sweet-button>
        <sweet-button size="small" @click="selectDate('prev-month')"> Previous Month </sweet-button>
        <sweet-button size="small" @click="selectDate('today')">Today</sweet-button>
        <sweet-button size="small" @click="selectDate('next-month')"> Next Month </sweet-button>
        <sweet-button size="small" @click="selectDate('next-year')"> Next Year </sweet-button>
      </sweet-button-group>
    </template>
  </sweet-calendar>
</template>

<script lang="ts" setup>
import {ref} from 'vue';

const calendar = ref();
const selectDate = (val: string) => {
  calendar.value.selectDate(val);
};
</script>
